import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'

Vue.config.productionTip = false

async function loadScript(url){
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}

/*
  single-spa缺陷
  1、不够灵活，不能动态加载js文件
  2、样式不隔离，没有js沙箱机制（window对象污染）

  CSS隔离方案

  子应用之间样式隔离
  Dynamic Stylesheet 动态样式表，当应用切换时移除老应用样式，添加新应用样式

  主应用和子应用之间的样式隔离
  1、BEM（Block Element Modifier）约定项目前缀
  2、CSS-Modules 打包时生成不冲突的选择器名
  3、Shadow DOM 真正意义上的隔离
  4、css-in-js
*/

registerApplication('myVueApp',
  async () => {
    console.log('加载模块')
    await loadScript(`http://localhost:10000/js/chunk-vendors.js`)
    await loadScript(`http://localhost:10000/js/app.js`)
    return window.singleVue // bootstrap mount unmount
  },
  location => location.pathname.startsWith('/vue') // 用户切换到了/vue的路径下，我需要加载对应的子应用
)
start()

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
